@import "@/style/btn.scss";
page {
    background-color: $uni-bg-color-grey;
}

text {
    font-size: $font-size-24;
    // color: $app-color-text-main;
}
.touch {
    &:active {
        opacity: 0.6;
    }
}
.text-icon {
    display: block;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

.main-color-text {
    color: $app-color-main;
}
.del-text {
    text-decoration: line-through;
}
.flex-fill {
    flex: 1;
}
.card-group {
    margin-bottom: 20rpx;
    background: $color-white;
    border-radius: $border-radius-10;
}
.placeholder-icon {
    width: 80rpx;
    height: 80rpx;
    background: #eee;
    margin-bottom: $app-page-padding;
}
.flex {
    display: flex;
}
.flex-center {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}
.flex-v-c {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
}
.flex-sa-c {
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-items: center;
}
.flex-s-c {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}
.paddingBottomBar {
    padding-bottom: 130rpx;
}
.custom-checkbox-box {
    position: relative;
    .checkbox-mark {
        position: absolute;
        z-index: 0;
        opacity: 0;
    }
}
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: $color-white;
    box-shadow: 0px -3px 38px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0 $app-page-padding;
}

.input-number-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .btn-input-box {
        position: relative;
        margin: 0 4rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            max-height: 56rpx;
            top: 0;
            left: 0;
            opacity: 0.1;
        }

        .btn-input {
            position: relative;
            z-index: 1;
            height: 56rpx;
            width: 90rpx;
            line-height: 1;
            border: none;
            background: transparent;
            text-align: center;
            font-size: $font-size-20;
        }
    }

    .btn-minus,
    .btn-plus {
        justify-content: center;
        align-items: center;
        position: relative;
        font-size: 45rpx;
        line-height: 56rpx;
        height: 56rpx;
        width: 56rpx;
        text-align: center;
        overflow: hidden;
        &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: currentColor;
            opacity: 0.1;
            border-radius: 100rpx;
        }
    }

    .btn-minus {
    }

    .color-shadow {
        opacity: 0.1;
    }
}
.btn-input-box {
    height: 44rpx;
    width: 90rpx;
    padding: 0 5rpx;
    &:before {
        background: $transparent;
    }
    .btn-input {
        width: 100%;
        font-size: $font-size-26;
    }
}
.input-number-box {
    border-radius: 100rpx;
    padding: 4rpx 6rpx;
    border: solid 1rpx #eaeaea;
    .btn {
        width: 42rpx;
        height: 42rpx;
        border-radius: 100rpx;
        background: #f2f2f2;
        border: none;
        padding: 0;
        text {
            color: $color-black;
        }
    }
    .disable {
        border: none;
        text {
            color: #ccc;
        }
    }
}

.list-footer {
    height: 60rpx;
}
.card-item,
.card-cell,
.order-item-box {
    background: $color-white;
    margin-bottom: 20rpx;
    border-radius: $border-radius-10;
}
.card-cell {
    padding: $app-page-padding;
    display: flex;
}
.card-cell {
    align-items: center;
    margin-bottom: 20rpx;
    .cell-icon {
        margin-right: 20rpx;
    }

    .cell-label {
        display: flex;
        flex: 1;
    }
}
.card-group {
    margin-bottom: 20rpx;
    background: $color-white;
    border-radius: $border-radius-10;
}

//提示弹窗
.toast {
    background: $color-white;
    border-radius: 16rpx;
    width: 640rpx;
    text-align: center;
    .toast-type {
        font-size: $font-size-34;
        color: $color-black;
        font-weight: 600;
        padding-top: 64rpx;
        padding-bottom: 40rpx;
    }
    .toast-msg {
        font-size: $font-size-34;
        padding-bottom: 46rpx;
        .toast-tel {
            text-align: left;
            padding: 30rpx 0;
            margin: 0 40rpx;
            &:not(:last-child) {
                border-bottom: 2rpx solid $uni-border-color;
            }
        }
    }
    .toast-btn-box {
        border-top: 2rpx solid $uni-border-color;
        .toast-btn {
            display: inline-block;
            width: 50%;
            color: $color-black;
            padding: 30rpx 0;
            box-sizing: border-box;
            text-align: center;
            &:first-child {
                border-right: 2rpx solid $uni-border-color;
            }
        }
        .toast-btn-submit {
            color: $color-main;
        }
        .toast-btn-full {
            width: 100%;
            &:first-child {
                border-right: none;
            }
        }
    }
}

.img-cell {
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20rpx;

    &:after {
        content: " ";
        width: 33%; //这个宽度和子元素宽度一致
        height: 0;
        display: block;
    }

    .img-item {
        position: relative;
        width: 180rpx;
        height: 180rpx;
        margin-bottom: $app-item-padding;
        margin-right: $app-item-padding;

        .img {
            width: 180rpx;
            height: 180rpx;
            border-radius: $border-radius-10;
        }

        .btn-del {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: -36rpx;
            right: -36rpx;
            width: 50rpx;
            height: 50rpx;
            border-radius: 40rpx;
            background: rgba($color-black, 0.3);
            color: $color-white;
            margin: 15rpx;
        }
    }

    .add-img {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 178rpx;
        height: 178rpx;
        border-radius: $border-radius-10;
        border: dashed 1rpx $color-gray-6;
        margin-right: $app-item-padding;
        margin-bottom: $app-item-padding;

        text {
            margin-top: 6rpx;
        }
    }
}

.custom-pop-main {
    flex-direction: column;

    .filter-action {
        border-top: solid 1rpx $uni-bg-color-grey;
        padding: $app-page-padding;
    }
    .custom-pop-item-title {
        display: flex;
        padding: $app-page-padding;
    }
    .filter-price {
        display: flex;
        flex-direction: row;
        padding: 0 $app-page-padding $app-page-padding;
        .price-box {
            display: flex;
            flex: 1;
            justify-content: center;
            border-bottom: solid 1rpx $app-color-input-bg;
            input {
                text-align: center;
                font-size: $font-size-24;
            }
        }
        .line {
            margin-left: 40rpx;
            margin-right: 40rpx;
        }
    }
}
// 文本显示相关
/* 显示一行文本 超出部分使用省略号 */
.text-show-line-1 {
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}
/* 显示两行文本 超出部分使用省略号 */
.text-show-line-2 {
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.zindeup .uni-calendar__mask,
.zindeup .uni-calendar--fixed {
    z-index: 9999 !important;
}
.pop-return-box {
    background: $color-white;
    border-radius: $border-radius-10;
    padding: $app-page-padding;
    width: 600rpx;

    textarea {
        max-height: 270rpx;
        background: #f8f8f8;
        border-radius: 8rpx;
        border: 1rpx solid #979797;
        padding: 10rpx 0;
        text-indent: 10rpx;
        margin: 24rpx 0;
        width: 598rpx;
    }
    .desc {
        font-size: 34rpx;
        color: $color-gray-1;
        padding: 8rpx 0 50rpx 0;
        text-align: center;
    }
    .pop-return-title {
        display: flex;
        justify-content: center;
        padding: 40rpx 0 32rpx 0;
        text {
            font-weight: 700;
            font-size: 32rpx;
            color: #000000;
        }
    }

    .pop-action {
        border-top: 1rpx solid rgba(0, 0, 0, 0.1);
        margin: 0 -24rpx -24rpx -24rpx;
        height: 110rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        view {
            width: 50%;
            text-align: center;
            height: 110rpx;
            line-height: 110rpx;
            font-size: 34rpx;
            font-weight: bold;
            color: $app-color-main;
        }

        & > view:first-child {
            color: $color-gray-1;
            border-right: 1rpx solid rgba(0, 0, 0, 0.1);
        }
    }
    .input-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 116rpx;
        padding: 0 $app-page-padding;
        margin: 0 20rpx;
        background: #f7f7f7;
        border-radius: 4px;
        margin-bottom: 48rpx;
        justify-content: space-between;
        .price-unit {
            font-size: $font-size-32;
            font-weight: bold;
        }
    }
}
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.radio-no {
    width: 26rpx;
    height: 26rpx;
    border: 2rpx solid #b2b2b2;
    border-radius: 50%;
    margin-right: 12rpx;
}
.radio-yes {
    width: 26rpx;
    height: 26rpx;
    border: 2rpx solid $app-color-main;
    text-align: center;
    border-radius: 50%;
    margin-right: 12rpx;
    view {
        width: 13rpx;
        height: 13rpx;
        margin: 6.5rpx auto;
        border-radius: 50%;
        display: block;
        background: $app-color-main;
    }
}
.footer {
    width: 750rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0px -2rpx 6rpx 0px rgba(0, 0, 0, 0.1);
    position: fixed;
    left: 0;
    bottom: 0;
}
.bei-an{
	text-align: center;
	color: #999;
	font-size: 24rpx;
	padding: 12rpx 0 40rpx 0;
}
